/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
    --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
    --spectrum-alert-banner-size: auto;
    --spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
    --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
    --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
    --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
    --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
    --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300);
    --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
    --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
    --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
    --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
    --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
    --spectrum-alert-banner-font-color: var(--spectrum-white);
    --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider));
    --mod-divider-vertical-height: auto;
    --mod-divider-vertical-align: stretch;
    --mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button));
    --mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider));
    --mod-button-margin-left: auto;
    --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
    --mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
    --mod-closebutton-align-self: flex-start;
    inline-size: auto;
    inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
    max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
    min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
    font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
    color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
    background-color: var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background));
    border: 0 solid #0000;
    border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
    justify-content: space-between;
    display: none;
}

:host([open]) {
    display: flex;
}

:host([variant="info"]) {
    background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
}

:host([variant="negative"]) {
    background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
}

.body {
    inline-size: 100%;
    gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px);
    flex-wrap: wrap;
    align-items: center;
    margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge));
    display: flex;
}

.content {
    display: flex;
}

.end {
    align-items: center;
    display: flex;
}

.type {
    inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
    block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
    flex-shrink: 0;
    margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon));
    margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
}

.text {
    margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text));
    margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text));
    margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
}

@media (forced-colors: active) {
    :host {
        --highcontrast-alert-banner-border-color: CanvasText;
        --highcontrast-alert-banner-border-width: var(--spectrum-border-width-100);
    }
}
